<template>
  <div class="play">
    <!-- 这部分结构太恶心了 为了好维护抽离出去 但是只能放该文件夹中 不能放@/compoennts -->
    <PlayOne />
    <div>2</div>
    <div>3</div>

    <el-cascader
      v-model="value"
      :options="options"
      separator="?"
      :props="{label: 'name', value: 'id'}"
      @change="handleChange"
    />

    <!-- 测试upload组件: 1. 选中文件  2.上传文件 -->
    <!--
      action 配置服务端地址   必选
      list-type 提供基本样式
      file-list 配置组件默认显示的情况
      limit 限制上传文件数量(请求是不发的   +号还在 需要处理)
      两个钩子(特定时机触发的函数就是钩子)
        :on-preview="fn"
        :on-remove="fn2"
        :before-upload="fn3"   上传前触发的钩子(一般用于文件校验)
    -->
    <el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      :before-upload="fn3"
    >
      <img v-if="false" class="avatar" src="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100" alt="">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
import PlayOne from './components/one'
export default {
  name: 'PlayGround',
  components: {
    PlayOne: PlayOne
  },
  data() {
    return {
      fileList: [
        {
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      value: [], // 是个数组  收集选中的值(包含父级)
      options: [
        {
          id: '1', // 提交后端
          name: '指南', // 显示出来
          children: [
            { name: '指南1', id: '2' },
            { name: '指南2', id: '3', children: [{ name: '指南2-1', id: '4' }] }
          ]
        }

      ]
    }
  },
  methods: {
    fn3(file) {
      // 参数为上传的文件  自己决定要不要继续上传    不想继续上传 return false/失败的promise
      console.log(file)

      if (file.size / 1024 / 1024 < 2 && file.type === 'image/jpeg') { return true }

      return false
    },
    handleChange(value) {
      // 当选中某个节点 触发change事件 执行函数
      // value 是选中的值 是个数组(包含父级的value)
      console.log(value[value.length - 1])
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
